<template>
  <div>
      <ul>
          <li v-for="item in shopcar" :key="item.id">
              <div class="img"><img :src="item.src" alt=""></div>
              <div class="introduce">
                  <div>{{item.title}}</div>
                  <div>￥{{item.price}}</div>
                  <button @click="del(item)">删除</button>
              </div>
          </li>
      </ul>
      <p v-if="shopcar.length">总价:{{totalPrice}}</p>
      <p v-else>购物车暂无商品</p>
  </div>
</template>

<script>
import {mapGetters, mapState } from 'vuex'
export default {
    name:'shopCar',
    // computed:{
    //     shopcar(){
    //         return this.$store.state.shopcar
    //     },
    //     totalPrice(){
    //       return this.$store.getters.totalPrice
    //     }
    // }
    computed:{
      ...mapState(['shopcar']),
      ...mapGetters(['totalPrice']),

      },
      methods:{
        del(item){
          this.$store.commit('del',item)
        }
      }
}
</script>

<style scoped>
    ul,li{
        margin: 0;
        padding: 0;
    }
    li{
        padding: 10px;
        display: flex;
        column-gap: 5%;
        border-bottom: 1px dashed #ccc;
    }
    .img{
        width: 40%;
        border: 1px solid #ccc;
    }
    img{
        max-width: 100%;
    }
    .introduce{
        width: 55%;
        display: flex;
        flex-direction: column;
        align-items: left;
        align-self: flex-end;
    }
    .introduce>div:nth-child(1){
        height: 40px;
        font-size: 18px;
        width: 50%;
        text-align: left;
        line-height: 40px;
    }
    .introduce>div:nth-child(2){
        height: 40px;
        font-size: 18px;
        color: #f00;
        width: 50%;
        text-align: left;
        line-height: 40px;

    }
    button{
        background: coral;
        outline: none;
        border: none;
        width: 100px;
        height: 35px;
        color: white;
    }
</style>